<template>
	<div	class='nav-btn'>
		<div
			class="item"
			:class="type"
			v-for="item in btns"
			:key="item.color"
		>
			<Button
				:bgColor="item.bgColor"
				:color="item.color"
				:height="160"
				:width="257"
				@click="$pushTo(item.name)"
			>
				<div class="btn-content">
					<img :src="item.img">
					<div
						class="label"
						v-html="item.label"
					/>
				</div>
			</Button>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      btns: [
        { label: '改造教程', color: '#A56300', bgColor: '#FAF1E6', name: 'TransformCourse', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220503150710882-Frame 46.png' },
        { label: '&ensp;商城', color: '#A52800', bgColor: '#FAE6E6', name: 'Store', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220503150710882-Frame 47.png' },
        { label: '分享社区', color: '#6232B1', bgColor: '#EAE6FA', name: 'Community', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220503150710882-Frame 48.png' },
        { label: '个人中心', name: 'UserHome', color: '#5B8B1F', bgColor: '#E5F3DC', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220503150710882-Frame 49.png' }
      ]
    }
  },
}
</script>

<style lang='scss' scoped>
.nav-btn {
  height: 100%;
  margin-right: 35px;

  .item {
    margin-bottom: 20px;

    .btn-content {
      display: flex;
      align-items: center;
      font-size: 36px;
    }
  }
}
</style>
